<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP基础视频</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header -->
    <header>
        <div class="logo">
            <img src="../前端第2天/images/test_demo8_img/logo.png" alt="Logo">
        </div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </nav>
        <div class="search">
            <input type="text" placeholder="搜索内容">
            <button>🔍</button>
        </div>
        <div class="user">
            <img src="../前端第2天/images/test_demo8_img/user.png" alt="Logo">
            <span>qq-lllei</span>
        </div>
    </header>

    <!-- Banner -->
    
    <section class="banner">
        <div class="banner-text">
            <h5>前端开发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></h5>
            <h5>前端开发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></h5>
            <h5>前端开发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></h5>
            <h5>前端开发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></h5>
            <h5>前端开发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></h5>
            <h5>前端开发&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></h5>
        </div>
        <div class="banner-text-right">
            <h2 style="background-color:aqua;">我的课程表</h2>
            <h3>继续学习，提升技能</h3>
            <h6>正在学习，提升技能</h6>
            <br>
            <h3>继续学习，提升技能</h3>
            <h6>正在学习，提升技能</h6>
        <br>
            <h3>继续学习，提升技能</h3>
            <h6>正在学习，提升技能</h6>

            
        </div>
       
    </section>

    <!-- Courses -->
    <section class="courses">
        <h2>精品推荐</h2>
        <div class="course-list">
            <!-- Repeat these course items as needed -->
            <div class="course-item">
                <img src="../前端第2天/images/test_demo8_img/pic.png" alt="Course Image">
                <h3>ThinkPHP5.0慕享乐实践</h3>
                <p>简介：环境搭建...</p>
                <span style=color:red>高级</span><span>:1125人在学</span>
            </div>
            <!-- More course items -->
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="footer-logo">
            <img src="../前端第2天/images/test_demo8_img/logo.png" alt="Footer Logo">
        </div>
      <div class="footer-info">
        <p>关于学成</p>
        <ul>
            <li>工作机会</li>
            <li>联系方式</li>
            <li>隐私政策</li>
        </ul>
    </div>
    <div class="footer-info">
        <p>关于学成</p>
        <ul>
            <li>工作机会</li>
            <li>联系方式</li>
            <li>隐私政策</li>
        </ul>
    </div>
    <div class="footer-info">
        <p>关于学成</p>
        <ul>
            <li>工作机会</li>
            <li>联系方式</li>
            <li>隐私政策</li>
        </ul>
    </div>
    </footer>

    <style>
        
        h3 {
            margin: 0;
            padding: 0;
            color: #000;
        }
        h6{
            margin: 0;
            padding: 0;
            color: #CBC9C7;
            text-align: start;
        }
        body {
            font-family: Arial, sans-serif;
        }
        header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px;
            background-color: #f8f8f8;
        }

        nav ul {
            display: flex;
            list-style-type: none;
        }
        nav ul li {
            margin-right: 20px;
        }
        .banner {
            background: url('../前端第2天/images/test_demo8_img/banner2.png') no-repeat center center;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            position: relative; 
        }
        .banner-text {
            position: absolute; /* 使用绝对定位使其浮动在左边 */
            left: 20px; /* 设置左边距 */
            top: 50%; /* 设置顶边距，使其垂直居中 */
            transform: translateY(-50%); /* 使用transform垂直居中文字 */
            background-color: rgba(0, 0, 0, 0.5); /* 添加背景色和透明度 */
            padding: 10px; /* 添加内边距 */
            border-radius: 5px; /* 设置圆角 */
        }
        .banner-text-right {
            position: absolute; /* 使用绝对定位使其浮动在右边 */
            right: 20px; /* 设置右边距 */
            top: 50%; /* 设置顶边距，使其垂直居中 */
            transform: translateY(-50%); /* 使用transform垂直居中文字 */
            background-color: rgba(252, 252, 252, 1); /* 添加背景色和透明度 */
            padding: 10px; /* 添加内边距 */
        }
        .courses {
            padding: 20px;
        }
        .course-list {
            display: flex;
            flex-wrap: wrap;
        }
        .course-item {
            width: 23%;
            margin: 1%;
            background-color: #f8f8f8;
            padding: 10px;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
        }
        footer {
            padding: 20px;
            background-color: #f8f8f8;
            display: flex;
            justify-content: space-between;
        }
    </style>
</body>
</html>
